<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    :z-index="1000"
    @close="onClose"
  >
    <TaskTitle title-name="法人详情" color="green" icon-name="Det" />
    <p-button type="primary" class="btn" @click="getDrawer">
      编辑
    </p-button>
    <div v-if="getFormData && formData.id" class="g-drawer-list-container">
      <TitleSecondary title="基本信息" />
      <FormBasicCorporate
        ref="FormBasicInfo"
        :form-info="formData"
        :show-view="true"
      />
      <!-- <TitleSecondary title="操作日志" /> -->
      <ProgressLog :list="formData.logs" />
    </div>
    <ButtonGroup
      class="g-drawer-footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import FormBasicCorporate from './FormBasicCorporate.vue';

import { postInsertQueryDetail } from '@/api/customerApi.js';

import DrawerMixin from './mixin';
import ProgressLog from '@/components/task/ProgressLog.vue';

export default {
  components: {
    FormBasicCorporate,
    ProgressLog,
  },
  mixins: [DrawerMixin],
  props: {
    corporateId: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      formData: {},
    };
  },

  computed: {
    footerButtons() {
      return [
        {
          key: 'close',
          label: '返回',
        },
      ];
    },
    getFormData() {
      return Object.keys(this.formData).length || 0;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          if (!this.corporateId) return;
          this.getInsertQueryDetail();
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async getInsertQueryDetail() {
      const res = await postInsertQueryDetail(this.corporateId);
      this.formData = res?.data?.data || {};
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
      this.$refs.FormBasicInfo.clearFile();
    },
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    getDrawer() {
      this.$emit('showEdit', this.corporateId);
      this.closeCallback()
    },
  },
};
</script>
<style scoped>
.btn {
  position: absolute;
  right: 20px;
  top: 7px;
  z-index: 101;
}
</style>
